<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_猜数字练习</title>
</head>
<body>
<h3>已生成一个1~100的随机数:</h3>
<input type="text" placeholder="请输入你猜的数字!">
<button onclick="guess()">点我验证</button>
<h3>小提示: <span></span> </h3>

<script>
    //1.生成一个[1,101)的随机数
    //[0,100)+1=[1,101)=>[1,100]
    let n = parseInt(Math.random()*100)+1;
    console.log('打个小抄:'+n);
    //6.1定义一个用来统计猜的次数的变量
    var count = 0;
    //2.定义猜数字的函数
    function guess(){
        //3.获取用户猜的数字
        let num = document.querySelector('input').value;
        //7.要对数据做合法性的校验
        //isNaN()用于判断参数是否为非数字,如果是非数字,结果为true,否则为false
        //if(isNaN(num)){
        //一对正斜杠(/)用来包裹正则表达式
        //^表示开头,$表示结尾,\d表示数字 +表示至少出现一次
        //.test(参数) 用来判断是否匹配前面的正则表达式,匹配返回true,不匹配返回false
        if(!/^\d+$/.test(num)){
            alert('请输入数字!');
            return;
        }
        //5.获取用来显示结果的span元素
        let spanE = document.querySelector('span');
        //6.2每猜一次,统计的次数+1
        count++;
        //4.拿着猜的数字与随机数做比较
        if(num>n){
            spanE.innerHTML = '猜大了!';
        }else if(num < n){
            spanE.innerHTML = '猜小了!';
        }else{
            spanE.innerHTML = '恭喜你用了'+count+'次就猜对了!';
        }
    }
</script>
</body>
</html>